import QtQuick 1.0
//import ShellInvoker 1.0
import "../../../common/lib/kdeadmouseutils-build-desktop"

FocusScope {
	id:focusItem
	property alias detailQml : detailQml
	signal movieChange()
	height :720
	width : 1024
	focus:true
	state:''
	
	Rectangle {
		color:'#000000'
		anchors.fill : parent
	}
      
	Image {
		id:photoId
		property int idx
		fillMode: Image.PreserveAspectFit
		height : parent.height;width : parent.width
		//anchors.right : parent.left
		anchors.bottom : parent.top
		states: State {
			  name: 'imgLoaded' 
			  when : photoId.status==Image.Ready
			  AnchorChanges { 
			    target: photoId 
			    anchors.bottom : parent.bottom
			  }
		}
		transitions: Transition {
		  AnchorAnimation { easing.type: Easing.InOutQuad }
		}
	}


	XbmcDetailMovie{
		id:detailQml
		state:''
		anchors.top:parent.top
		anchors.topMargin:5
		z:2
		anchors.left : parent.right
		localFocus:true
		Keys.onDownPressed : {
			console.log('down Detail');
			focusItem.state='';
			event.accepted = true;
			//focusItem.movieChange();
		}
	}
    
    
    
      
      
      
      
      
      
	Component {
		id: delegate
		Item {
		    id:rectItem
		    width: 150
		    height: 200
		    //color:'transparent'
		    //focus:true
		    Keys.onReturnPressed : {
			  console.log('item selected');
			  focusItem.state='showDetail';
			  event.accepted = true;
		    }
		    Image {
			  fillMode: Image.PreserveAspectFit
			  anchors.horizontalCenter:parent.horizontalCenter
			  source: poster
			  anchors.top:parent.top
			  id:imgMain
			  width:parent.width
			  height:parent.height * 2 / 3
			  smooth: true
		    }
		      
		    Image {
				rotation:180
				anchors.top:imgMain.bottom
				width:parent.width
				height:parent.height *2/3
				fillMode: Image.PreserveAspectFit
				anchors.horizontalCenter:parent.horizontalCenter
				anchors.topMargin:5
				source: poster
				smooth: true
		    }
		    
		    Rectangle {
				anchors.horizontalCenter:parent.horizontalCenter
				anchors.topMargin:5
				anchors.top:imgMain.bottom
				width:parent.width
				height:parent.height/2 + 3
				smooth: true
				gradient: Gradient {
				    GradientStop { position: 0.0; color: "transparent" }
				    GradientStop { position: 0.3; color:'#010101' }
				}
		    }
		    
		    states: 
			    [State {
					  name: "active" 
					  when: index==view.currentIndex&&focusItem.state==''// rectItem.activeFocus
					  PropertyChanges { target: rectItem;scale: 2}
					  //PropertyChanges { target: photoId;source: photo1?photo2:''}
					  //PropertyChanges { target: detailQml;currentObj: }
					  
				}]
		    transitions: Transition {
				SpringAnimation { properties: "scale"; duration: 200 ;spring: 3; damping: 0.2}
		    }
		    
		 }
      }
      
      //arrière plan d en bas
    Rectangle {
		anchors.bottom:parent.bottom
		width:parent.width
		height:100
		gradient: Gradient {
		    GradientStop { position: 0.0; color: "transparent" }
		    GradientStop { position: 0.3; color:'#010101' }
		}
    }
    
     ListView {
		z:0
		id:view
		focus:focusItem.state==''?true:false
		width: 150
		anchors.horizontalCenter:focusItem.horizontalCenter
		anchors.bottom:focusItem.bottom
		anchors.bottomMargin:200
		//anchors.topMargin:500
		orientation : ListView.Horizontal
		cacheBuffer : width * 2
		spacing: 40
		snapMode:ListView.SnapToItem
		property variant dataProvider : MovieModel{}
		model: dataProvider.model
		Keys.onReturnPressed : {
		  console.log('item selected List view');
		}
		Keys.onDownPressed : {
		  rollImage(-1);
		}
		Keys.onUpPressed : {
		  rollImage(1);
		}
		
		function rollImage(stp){
		  var idxStp = photoId.idx+stp;
		  var modelIt = model.get(currentIndex);
		  //console.log('rollImage :'+idxStp);
		  //console.log('====>modelIt :'+modelIt.photo.count);
		  var imgUrl = modelIt.photo.get(idxStp).url;
		  //console.log('imgUrl :'+imgUrl);
		  if(imgUrl){
		    photoId.idx=idxStp;
		    photoId.source='';
		    photoId.source=imgUrl;
		  }
		}
		delegate: delegate
// 		highlight : Rectangle {
// 		  height: 20
// 		  radius: 5
// 		  color: '#1f0033'
// 		  y:-120
// 		  Behavior on y { PropertyAnimation {} }
// 		}
        onCurrentIndexChanged : {
			dataProvider.globalEnrich(currentIndex);
			var modelIt = model.get(currentIndex);
			detailQml.state = '';
			photoId.source='';
			detailQml.clear();
			console.log('tt changed:'+modelIt.title);
			detailQml.currentObj=modelIt;
			//detailQml.state = "show";
			//ici appel Timer
			//photoId.state='';
			photoId.source=modelIt.photo.get(1).url;
			photoId.idx=1;
		}
     }
     
    states: [
	State {
		name: "showDetail"
		AnchorChanges { 
		  target: detailQml 
		  anchors.horizontalCenter:focusItem.horizontalCenter
		  anchors.left : ''
		}
		AnchorChanges { 
		  target: view 
		  anchors.top:focusItem.bottom
		  anchors.bottom:''
		}
		PropertyChanges { target: detailQml;localFocus:true}
		//PropertyChanges { target: view;anchors.topMargin:500}
	}
	/*,State {
		name: ''
		AnchorChanges { 
		  target: view 
		  anchors.bottom:focusItem.bottom
		  
		}
		PropertyChanges { 
		  target: view
		  focus:true
		  
		}      
	}*/
	
    ]
    transitions: Transition {
	  AnchorAnimation { easing.type: Easing.InOutQuad }
	}
}

 
